<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="com.alpha.bom.*" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add Question Page</title>
</head>
<body>
	<script language="javascript">
		$(function() {
	
			// add multiple select / deselect functionality
			$("#selectall").click(function() {
				if(this.checked)
					$('.case').attr('checked', this.checked).parent().addClass("checked");
				else
					$('.case').attr('checked', this.checked).parent().removeClass("checked");
			});
	
			// if all checkbox are selected, check the selectall checkbox
			// and viceversa
			$(".case").click(function() {
	
				if ($(".case").length == $(".case:checked").length) {
					$("#selectall").attr("checked", "checked").parent().addClass("checked");
				} else {
					$("#selectall").removeAttr("checked").parent().removeClass("checked");
				}
	
			});
		});
	</script>
	
	<c:set var="user" value="${sessionScope.user}"></c:set>
	<c:set var="questions" value="${requestScope.questions}"></c:set>
	<c:set var="exam" value="${requestScope.exam}"></c:set>
	
	<c:if test="${user.userType ne 'Professor'}" >
		<c:redirect url="LoginServlet"></c:redirect>
	</c:if>
	
	<div id="header"><%@ include file="Header.jsp"%></div>
	<div id="content">
	<div id="navbar"><%@ include file="NavigationBar.jsp"%></div>
	
	<div id="main">
	
		<div class="box">
			<div class="box-header well">
				<h2><i class="icon-list-alt"></i> Add Questions</h2>
				<div class="box-icon">
					<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
				</div>
			</div>
			<div class="box-content">
				<form class="form-horizontal" id="question_form" action="SaveQuestionsServlet" method="post">
					<input type="hidden" value="${exam.examId}" name="exam_id"/>
					<fieldset>
						<div class="control-group">
							<br>
							
							<label class="control-label">Exam Name</label>
							<div class="controls">
								<div class="alert alert-info" style="width:230px;">${exam.examName}</div>
							</div>
							
							<label class="control-label">Exam Type</label>
							<div class="controls">
								<div class="alert alert-info" style="width:230px;">${exam.examType}</div>
							</div>
							
							<label class="control-label">Exam Category</label>
							<div class="controls">
								<div class="alert alert-info" style="width:230px;">${exam.category}</div>
							</div>
						</div>
					</fieldset>
					<hr></hr>
					<table class="table table-striped table-bordered bootstrap-datatable datatable">
						<thead>
							<tr>
								<th><label style="text-align: center;" class="checkbox"><input type="checkbox" id="selectall"/></label></th>
								<th>Question</th>
								<th>Question Type</th>
								<th>Question Category</th>
								<th>Correct Answer</th>
								<th>Choices</th>
							</tr>
						</thead>   
						<tbody>
							<c:forEach var="question" items="${questions}">
								<tr>
									<td><label style="text-align: center;" class="checkbox"><input type="checkbox" class="case" name="case" value="${question.questionId}"/></label></td>
									<td>${question.question}</td>
									<td>
										<c:choose>
											<c:when test="${question.questionType eq 'multiplechoice'}">
												Multiple Choice
											</c:when>
											<c:otherwise>
												True or False
											</c:otherwise>
										</c:choose>
									</td>
									<td>${question.category}</td>
									<td>${question.correctAnswer.answer}</td>
									<td>
										<c:forEach var="ans" items="${question.choices}">
											${ans.answer}
											<br>
										</c:forEach>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<p class="center">
						<br>
						<button class="btn btn-success" type="submit"><i class="icon-plus"></i> Add Questions to Exam</button>
					</p>	  
				</form>
				
			</div>
		</div>
	</div>
	</div>
	
</body>
</html>